<template>
  <el-form ref="form" :model="form" :rules="rules" >
    <!-- 滚动区域 -->
    <div class="form-scroll-container">

      <!-- 第一列 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="姓　　名" prop="nickName" style="display: flex; align-items: center;">
           <el-input v-model="form.nickName" type="text" auto-complete="off" placeholder="姓名" style="width: 250px;">
             <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
           </el-input>
         </el-form-item>

          <!-- 用户性别 -->
          <el-form-item label="性　　别" prop="sex" style="display: flex; align-items: center;">
            <el-select v-model="form.sex" placeholder="性别" style="width: 250px;">
              <el-option label="男" value="0"></el-option>
              <el-option label="女" value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="身份证号" prop="idcard" style="display: flex; align-items: center;">
            <el-input v-model="form.idcard" placeholder="身份证号码" style="width: 250px;"></el-input>
          </el-form-item>

          <el-form-item label="出生日期" prop="birthday" style="display: flex; align-items: center;">
            <el-date-picker v-model="form.birthday" type="date" placeholder="出生日期"
                            style="width: 250px;" value-format="yyyy-MM-dd"/>
          </el-form-item>

          <el-form-item label="文化程度" prop="culture" style="display: flex; align-items: center;">
            <el-select v-model="form.culture" placeholder="文化程度" style="width: 250px;">
               <el-option label="小学" value="小学"></el-option>
               <el-option label="初中" value="初中"></el-option>
               <el-option label="高中" value="高中"></el-option>
               <el-option label="大专" value="大专"></el-option>
               <el-option label="本科" value="本科"></el-option>
               <el-option label="硕士" value="硕士"></el-option>
               <el-option label="博士" value="博士"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="政治面貌" prop="political" style="display: flex; align-items: center;">
            <el-select v-model="form.political" placeholder="政治面貌" style="width: 250px;">
              <el-option label="党员" value="党员"></el-option>
              <el-option label="群众" value="群众"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="籍　　贯" prop="nativeplace" style="display: flex; align-items: center;">
            <el-input v-model="form.nativeplace" placeholder="籍贯" style="width: 250px;"></el-input>
          </el-form-item>

          <el-form-item label="入伍时间" prop="workDate" style="display: flex; align-items: center;">
            <el-date-picker v-model="form.workDate" type="date" placeholder="工作时间"
                            style="width: 250px;" />
          </el-form-item>
        </el-col>
        <!-- 第二列 -->
        <el-col :span="12">

          <!-- 单位编号 -->
          <el-form-item label="单位编号" prop="deptId" style="display: flex; align-items: center;">
            <el-input-number v-model.number="form.deptId" placeholder="单位编号" :controls="false" style="width: 250px;"/>
          </el-form-item>

          <el-form-item label="军　　衔" prop="jxClass" style="display: flex; align-items: center;">
            <el-select v-model="form.jxClass" placeholder="请选择退伍时军衔" style="width: 250px;">
              <el-option label="义务兵" value="义务兵"></el-option>
              <el-option label="下士" value="下士"></el-option>
              <el-option label="中士" value="中士"></el-option>
              <el-option label="二级上士" value="二级上士"></el-option>
              <el-option label="一级上士" value="一级上士"></el-option>
              <el-option label="三级军士长" value="三级军士长"></el-option>
              <el-option label="二级军士长" value="二级军士长"></el-option>
              <el-option label="一级军士长" value="一级军士长"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="职业技能" prop="major" style="display: flex; align-items: center;">
            <el-input v-model="form.major" placeholder="职业技能专业" style="width: 250px;"></el-input>
          </el-form-item>

          <el-form-item label="技能等级" prop="level" style="display: flex; align-items: center;">
            <el-input v-model="form.level" placeholder="技能等级" style="width: 250px;"></el-input>
          </el-form-item>

          <el-form-item label="奖惩情况" prop="rewards" style="display: flex; align-items: center;">
            <RewardMultiSelect v-model="form.rewards" placeholder="奖惩情况" style="width: 250px;"></RewardMultiSelect>
          </el-form-item>

          <!-- 手机号码 -->
          <el-form-item label="手机号码" prop="phonenumber" style="display: flex; align-items: center;">
            <el-input v-model="form.phonenumber" placeholder="手机号码" style="width: 250px;"></el-input>
          </el-form-item>

          <el-form-item label="家庭住址" prop="addr" style="display: flex; align-items: center;">
            <el-input v-model="form.addr" placeholder="家庭住址" style="width: 250px;"></el-input>
          </el-form-item>

        </el-col>
      </el-row>
    </div>
    <el-form-item>
      <el-button type="primary" size="mini" @click="submit">保存</el-button>
      <el-button type="danger" size="mini" @click="close">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {getUserProfile, updateUserProfile} from "@/api/system/user";
import RewardMultiSelect from "@/components/RewardMultiSelect.vue";

function isValidDate(idcard) {
  const year = parseInt(idcard.substr(6, 4), 10);
  const month = parseInt(idcard.substr(10, 2), 10);
  const day = parseInt(idcard.substr(12, 2), 10);
  const date = new Date(year, month - 1, day);
  return (
    date.getFullYear() === year &&
    date.getMonth() + 1 === month &&
    date.getDate() === day
  );
}
function validateIdCardCheckDigit(idcard) {
  const Wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
  const Ai = ['1','0','X','9','8','7','6','5','4','3','2'];
  let sigma = 0;
  for (let i = 0; i < 17; i++) {
    sigma += parseInt(idcard[i], 10) * Wi[i];
  }
  const checkCode = Ai[sigma % 11];
  return idcard[17].toString().toUpperCase() === checkCode;
}

export default {
  components: {RewardMultiSelect},
  props: {
    user: {
      type: Object
    }
  },
  data() {
    return {
      form: {},
      // 表单校验
      rules: {
        userName: [
          {required: true, trigger: "blur", message: "请输入您的账号"},
          {min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur'}
        ],
        nickName: [
          {required: true, trigger: "blur", message: "请输入您的账号"},
          {min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur'}
        ],
        deptId: [
          { required: true, message: "请输入部门编号", trigger: "blur" },
          { type: "number", min: 1, message: "部门编号必须大于0", trigger: "blur" }
        ],
        phonenumber: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { pattern: /^1[3|4|5|7|8][0-9]\d{8}$/, message: "手机号码格式不正确", trigger: "blur" }
        ],
        sex: [
          { required: true, message: "请选择性别", trigger: "change" }
        ],
        idcard: [
          { required: true, message: "请输入身份证号码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (!/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[12]\d|3[01])\d{3}[\dxX]$/.test(value)) {
                callback(new Error("身份证号码格式不正确"));
              } else if (!isValidDate(value)) {
                callback(new Error("身份证号码中的出生日期不合法"));
              } else if (!validateIdCardCheckDigit(value)) {
                callback(new Error("身份证号码最后一位校验码错误"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],

        birthday: [
          {required: true, message: "请选择出生日期", trigger: "change"}
        ],
        culture: [
          {required: true, message: "请选择文化程度", trigger: "change"}
        ],
        political: [
          {required: true, message: "请选择政治面貌", trigger: "change"}
        ],
        nativeplace: [
          {required: true, message: "请输入籍贯", trigger: "blur"}
        ],
        workDate: [
          {required: true, message: "请选择工作时间", trigger: "change"}
        ],
        jxClass: [
          {required: true, message: "请输入JX分类", trigger: "blur"}
        ],
        major: [
          {required: true, message: "请输入职业技能专业", trigger: "blur"}
        ],
        level: [
          {required: true, message: "请输入技能等级", trigger: "blur"}
        ],
        rewards: [
          {required: true, message: "请输入奖惩情况", trigger: "blur"}
        ],
        addr: [
          {required: true, message: "请输入家庭住址", trigger: "blur"}
        ]
      }
    };
  },
  watch: {
    user: {
      handler(user) {
        if (user) {
          this.form = {
            userId: user.userId,
            userName: user.userName,
            code: user.code,
            uuid: user.uuid,
            idcard: user.idcard,
            birthday: user.birthday,
            culture: user.culture,
            political: user.political,
            nativeplace: user.nativeplace,
            workDate: user.workDate,
            jxClass: user.jxClass,
            major: user.major,
            level: user.level,
            rewards: user.rewards,
            addr: user.addr,
            deptId: user.deptId,       // 新增：部门编号
            phonenumber: user.phonenumber,    // 新增：手机号码
            sex: user.sex,             // 新增：性别
            nickName: user.nickName,       // 新增：用户昵称
            email: user.email,
            remark: user.remark,
            postIds: [4],        // 新增：岗位值固定为4
            roleIds: [2]     ,    // 新增：角色
            status: "0",
            delFlag: "0",
          };

        }
      },
      immediate: true
    }
  },

  methods: {

    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          updateUserProfile(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.user.phonenumber = this.form.phonenumber;
            this.user.email = this.form.email;
          });
        }
      });
    },
    close() {
      this.$tab.closePage();
    }
  }
};
</script>
